<script setup>
</script>

<template>
	<router-view></router-view>
</template>

<style lang="scss">
.auto-scroll-view{
	$scrollHeaderHeight:1.8em;
	height: 100%;
	font-size: .3em;
	position: relative;
	box-sizing: border-box;
	color: #ffffff;
	padding-top: $scrollHeaderHeight;
	.scroll-header,.scroll-body .scroll-body-row{
		display: flex;
		&>*{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			&:last-child{
				border-right: 0;
			}
		}
	}
	.scroll-header{
		height: $scrollHeaderHeight;
		box-sizing: border-box;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: #b0c4de;
		&>*{
			height: 100%;
			font-weight: bold;
			white-space:nowrap; 
			overflow:hidden; 
			text-overflow:ellipsis;
			padding: 0 .2em;
		}
	}
	.scroll-body{
		height: 100%;
		.no-data{
			padding-top: 2em;
			font-size: 1.3em;
			text-align: center;
		}
		.scroll-body-row{
			&:nth-child(odd){
				color: #00ffff;
			}
			&>*{
				padding: .38em .2em;
				word-break:break-all;
				word-wrap:break-word;
			}
		}
	}
}
.ver-flex-containter{
	display: flex;
	height: 100%;
	flex-direction: column;
}
.hor-flex-containter{
	display: flex;
	height: 100%;
	flex-direction: row;
}
</style>
